<template>
  <section
    @click="clickCurrent('current')"
    @mousedown="clickCurrent('dragging')"
  >
    <div
      :class="['custorm--modelbox', 'graphicnavlist-show', (custormCurrent == custormIndex)?'drag active':'drag']"
      :style="{'padding':custormItemData.style.margincol+'px '+custormItemData.style.marginrow+'px'}"
    >
      <div
        v-if="custormItemData.params.isshow == '2'"
        class="noshow"
        v-bind:style="{'background-image':`url(${getPath('noshow.png')})`}"
      ></div>
      <div
        style="background:#ffffff"
        :style="{'border-radius':custormItemData.style.radius == 1?'0':'5px'}"
      >
        <div
          class="es-listmenu"
          v-for="(item, index) in custormItemData.data"
          :key="index"
        >
          <div
            v-if="custormItemData.style.display == '1'"
            class="remark"
            v-bind:style="{'background-image':`url(${getPath(item.thumb.file_path)}`}"
          ></div>
          <!-- <div v-if="custormItemData.style.display == '1'" class="icon1" style="color: rgb(153, 153, 153);"><i :class="[item.edit.icon]"></i></div> -->
          <div class="text line-hide flex-row flex-justify-b flex-align-c">{{item.title}}<i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
      <div
        class="btn-edit-del"
        @click="delCurrent"
      ><span class="btn-del icon icon-close"></span></div>
    </div>
  </section>
</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicnavlist-show {
  background: #f1f1f1;

  .es-listmenu {
    padding: 0 6px;
    margin: 0 12px;
    border-bottom: 1px solid #ededed;
    height: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    color: #333;
  }

  .es-listmenu .icon1 {
    margin-right: 10px;
  }

  .es-listmenu .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .es-listmenu .remark {
    // color: #999;
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    margin-right: 20px;
  }

  .es-listmenu .remark i {
    font-size: 14px;
  }
}
</style>
